<template>
	<div class="footer">
		<p>
			<router-link to="/consultation">
				<template v-if='hover=="0"'>
					<img src="/static/img/icon_zixun_hover.png" alt="资讯">
				</template>
				<template v-else>
					<img src="/static/img/icon_zixun.png" alt="资讯">
				</template>
			</router-link>
		</p>
		<p>
			<router-link to="/home1">
				<template v-if='hover=="1"'>
					<img src="/static/img/icon_zuqiu_hover.png" alt="足球">
				</template>
				<template v-else>
					<img src="/static/img/icon_zuqiu.png" alt="足球">
				</template>
			</router-link>
		</p>
		<router-link to="/">
			<p class="Icon">
				<span class="imgBg"><img src="/static/img/icon_sq.png" alt="社区"></span>
			</p>
		</router-link>
		<p>
			<router-link to="/home2">
				<template v-if='hover=="3"'>
					<img src="/static/img/icon_lanqiu_hover.png" alt="篮球">
				</template>
				<template v-else>
					<img src="/static/img/icon_lanqiu.png" alt="篮球">
				</template>
			</router-link>
		</p>
		<p>
			<router-link to="/user">
				<template v-if='hover=="4"'>
					<img src="/static/img/icon_my_hover.png" alt="我的">
				</template>
				<template v-else>
					<img src="/static/img/icon_my.png" alt="我的">
				</template>
			</router-link>
		</p>
	</div>
</template>

<script>
export default{
	name:'HomeFooter',
	props:{
      hover:String,
    },
	data:function(){
		return {
			
		}
	},
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
	.footer{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		box-shadow:0px -3px 8px 0px rgba(4,0,0,0.04), 0px -1px 0px 0px rgba(229,229,229,1);
		background: #fff;
		justify-content: space-between;
		display: flex;
		padding: .15rem .15rem 0;
		box-sizing:border-box;
		p{
			padding:0 .3rem;
			img{
			  	width: .38rem;
			  	height: auto;
			  	margin:0 auto .15rem;
			  	display: block;
			}
			span{
			  	display: block;
			  	font-size: .18rem;
			  	color: @grayColor;
			  	text-align: center;
			}
		}
		.Icon{
			margin-top: -.45rem;
			.imgBg{
				border-radius:50%;
				width: 1.01rem;
				height: 1.18rem;
				overflow: hidden;
				img{
					width: 100%;
					height: 100%;
					border-radius:50%;
				}
			}
		}
		
	}
</style>